<script setup lang="ts">
import { computed, ref } from 'vue'
import chart from '@/components/common/chart.vue'

interface chartData {
  name: string;
  series: number[]
}

const props = defineProps<{
  name: string[],
  data: chartData[]
  height?: string,
  width?: string,
  color?: string[]
}>()

const width = props.width || '100%';
const height = props.height || '100%';
const color = props.color || ['rgba(34, 184, 254, 1)', 'rgba(254, 133, 0, 1)', 'rgba(255, 191, 1, 1)', 'rgba(255, 53, 53, 1)']

const options = computed(() => {
  let series: any[] = []
  props.data.forEach((item) => {
    series.push({
      name: item.name,
      type: 'line',
      symbol: 'none',
      data: item.series
    })
  })
  
  let opt = {
    color,
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      top: '10%',
      left: '5%',
      right: '5%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisTick: {
        show: false,
      },
      data: props.name
    },
    yAxis: {
      type: 'value'
    },
    series,
  }
  return opt;
})

</script>

<template>
  <div :style="{ width: `${width}`, height: `${height}` }" class="chart-box">
    <chart class="chart" :options="options" />
  </div>
</template>

<style scoped lang="stylus">
.chart-box {
  .chart {
    width: 100%;
    height: 100%;
  }
}
</style>